@use 'sass:map';
@import './codemirror.css';
@import './monokai.min.css';
@import './kuaishoustyles.scss';
@import './kuaishou_dow_video.scss';
$base-bg-color: #e6e2d6;
$base-text-color: #333;
$base-gray: #ccc;
$primary-color: #025ef0;
$danger-color: #ff0000;
$--color-white: #fff;
$--color-black: #000;
$danger-color-light-1: mix($--color-white, $danger-color, 10%);
$danger-color-light-2: mix($--color-white, $danger-color, 20%);
$danger-color-light-3: mix($--color-white, $danger-color, 30%);
$danger-color-light-7: mix($--color-white, $danger-color, 70%);
$danger-color-light-8: mix($--color-white, $danger-color, 80%);
$danger-color-light-9: mix($--color-white, $danger-color, 90%);

$primary-color-light-1: mix($--color-white, $primary-color, 10%);
$primary-color-light-2: mix($--color-white, $primary-color, 20%);
$primary-color-light-3: mix($--color-white, $primary-color, 30%);
$primary-color-light-7: mix($--color-white, $primary-color, 70%);
$primary-color-light-8: mix($--color-white, $primary-color, 80%);
$primary-color-light-9: mix($--color-white, $primary-color, 90%);

$dir-map: ('mt': margin-top,
  'mr': margin-right,
  'mb': margin-bottom,
  'ml': margin-left,
  'pt': padding-top,
  'pr': padding-right,
  'pb': padding-bottom,
  'pl': padding-left);

@each $dir in mt,
mr,
mb,
ml,
pt,
pr,
pb,
pl {
  $dirname: map-get($dir-map, $dir);

  @each $n in 5,
  10,
  15,
  20,
  25,
  30,
  40,
  50,
  60,
  70,
  80,
  90,
  100 {
    .#{$dir}#{$n} {
      #{$dirname}: #{$n}px !important;
    }
  }
}

.mt10 {
  margin-top: 10px;
}

// ////////////
// Dialog    //
// ////////////
.tm-dialog-container {
  height: 100%;
  width: 400px;
  // height: 200px;
  min-height: 200px;
  background-color: $base-bg-color;
  color: $base-text-color;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 9999;
  box-shadow: 3px 3px 10px #333;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .tm-dialog-header {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: $primary-color;
    color: $--color-white;
    cursor: move;
    border-radius: 4px 4px 0 0;
    padding: 0 10px;
    box-sizing: border-box;
    user-select: none;

    .tm-dialog-title {
      i {
        margin-right: 5px;
      }
    }

    .tm-dialog-op {
      display: flex;
      align-items: center;

      .tm-button {
        margin-right: -5px;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 0;
        color: $--color-white;
        border: 2px solid $--color-white;
        width: 30px;
        height: 30px;
        line-height: 0;
        padding: 0;
        justify-content: center;
        border-radius: 4px;
        background: linear-gradient(to right bottom, $danger-color-light-7, $danger-color);

        &:hover {
          background: linear-gradient(to right bottom, $danger-color-light-8, $danger-color);
        }

        &:active {
          background: linear-gradient(to left top, $danger-color-light-8, $danger-color);
        }

        &:focus {
          outline: none;
        }

        &.primary {
          background: linear-gradient(to right bottom, $primary-color-light-7, $primary-color);

          &:hover {
            background: linear-gradient(to right bottom, $primary-color-light-8, $primary-color);
          }

          &:active {
            background: linear-gradient(to left top, $primary-color-light-8, $primary-color);
          }
        }
      }
    }
  }

  .tm-dialog-body {
    padding: 15px;
    flex: 1 0 0px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    height: 100%;
    overflow-x: hidden;
  }

  .tm-dialog-footer {
    height: 30px;
    padding: 0 15px 15px;
    display: flex;
    justify-content: flex-end;
    // box-sizing: border-box;
  }

  .tm-dialog-resize {
    .resize-el {
      width: 10px;
      height: 10px;
      user-select: none;
    }

    .resize-top-left {
      top: 0;
      left: 0;
      cursor: nw-resize;
      position: absolute;
      z-index: 3000;
    }

    .resize-top-right {
      top: 0;
      right: 0;
      cursor: ne-resize;
      position: absolute;
      z-index: 3000;
    }

    .resize-bottom-right {
      right: 0;
      bottom: 0;
      cursor: se-resize;
      position: absolute;
      z-index: 3000;
    }

    .resize-bottom-left {
      left: 0;
      bottom: 0;
      cursor: sw-resize;
      position: absolute;
      z-index: 3000;
    }
  }
}

// ////////////
// Drawer    //
// ////////////
.tm-drawer-container {
  // min-width: 100px;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  left: 0;
  bottom: 0;
  top: 0;
  background-color: $base-bg-color;
  box-shadow: 0 0 20px #333;

  .tm-drawer-close {
    width: 40px;
    height: 40px;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    position: absolute;
    font-weight: 700;
    right: -20px;
    top: 0;
    color: #999;
    cursor: pointer;
    user-select: none;
    background-color: $primary-color;
    box-sizing: border-box;
    z-index: 10;
    color: $--color-white;
    border-radius: 50%;

    &:hover {
      background-color: mix($--color-white, $primary-color, 30%);
    }

    &:active {
      background-color: mix($--color-white, $primary-color, 20%);
    }
  }

  .tm-drawer-resize-right,
  .tm-drawer-resize-left {
    width: 5px;
    height: 100vh;
    // background-color: rgba($color: #999, $alpha: 0.3);
    position: absolute;
    top: 0;
    bottom: 0;
    user-select: none;
  }

  .tm-drawer-resize-right {
    right: 0;
    cursor: e-resize;
  }

  .tm-drawer-resize-left {
    left: 0;
    cursor: w-resize;
  }
}

// ////////////////
// StartDrawer   //
// ////////////////
.tm-start-drawer {
  background-color: $primary-color;
  $icon-size: 80px;

  .task-menu-start {
    width: $icon-size;
    height: $icon-size;
    color: #fff;
    text-align: center;
    writing-mode: vertical-rl;
    line-height: $icon-size;
    font-size: 40px;
    cursor: default;
    background-color: #fe8a19;
    position: relative;
    z-index: 99;

    i.el-icon-s-help {
      transition: transform 0.4s ease-in-out;
    }

    &:hover {
      background-color: mix($--color-white, #fe8a19, 30%);

      i.el-icon-s-help {
        transform: rotate(225deg);
      }
    }

    &:active {
      background-color: mix($--color-white, #fe8a19, 20%);
    }
  }

  $column-number: 4;

  .task-menu-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $primary-color;
  }

  .task-menu-container {
    z-index: -1;
    position: absolute;
    left: 100%;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    width: $column-number * 100px + 25px + $column-number * 5px;
    padding: 15px;
    padding-right: 10px;
    background-color: mix($--color-black, $primary-color, 10%);
    box-sizing: border-box;
  }

  .task-menu-item {
    width: 100px;
    height: 100px;
    background-color: rgba($color: $--color-white, $alpha: 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    margin-bottom: 5px;
    user-select: none;
    position: relative;
    z-index: 88;
    transition: transform 0.2s ease-in-out;

    &:hover {
      transform: scale(1.2);
      background-color: rgba($color: $--color-white, $alpha: 0.8);
    }

    &:active {
      background-color: rgba($color: $--color-white, $alpha: 0.6);
    }

    [class*=' el-icon-'],
    [class^='el-icon-'] {
      font-size: 40px;
    }
  }

  .task-item {
    width: 40px;
    min-height: 100px;
    box-shadow: 0 0 20px #efbe61 inset;
    background-color: $primary-color;
    color: #fff;
    text-align: left;
    padding-top: 15px;
    padding-bottom: 15px;
    // 竖
    // 向
    // 文
    // 字
    writing-mode: vertical-rl;
    line-height: 40px;
    cursor: default;
    margin-top: 2px;
    user-select: none;
    position: relative;
    z-index: 100;

    &:hover {
      box-shadow: 0 0 20px $--color-white inset;
    }

    &:active {
      box-shadow: 0 0 20px $--color-white inset;
    }
  }
}

// ////////////
// Button    //
// ////////////
button.tm-button {
  padding: 0 10px;
  box-sizing: border-box;
  height: 30px;
  font-size: 14px;
  font-family: 'Courier New', Courier, monospace;
  margin: 0;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;

  // margin-bottom: 10px;
  &+& {
    margin-left: 10px;
  }
}

// vue transition class
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */
  {
  opacity: 0;
}

.slide-left-in-enter-active,
.slide-left-in-leave-active {
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.slide-left-in-enter,
.slide-left-in-leave-to

/* .fade-leave-active below version 2.1.8 */
  {
  transform: translate3d(-110%, 0, 0);
}

html,
body {
  height: 100%;
}

// /////////////////
// StorageView    //
// /////////////////
.tm-storage-view {
  width: 100%;
  height: 100%;

  .table-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .table-main {
    flex: 1 0 0px;

    .el-table td,
    .el-table th {
      padding: 5px 0;
    }
  }

  .table-page {
    height: 40px;
    margin-top: 10px;
  }

  .list {
    background-color: $--color-white;
    height: 100%;
    overflow-x: hidden;
    border: 2px solid #ccc;
  }

  .list-item {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;

    &.active {
      color: #fff;
      background-color: $primary-color;
    }

    &:hover {
      color: #fff;
      background-color: $primary-color;
    }
  }
}

// ////////////
// AddRule    //
// ////////////
.add-rule-container {
  .el-form {
    width: 100%;
    // padding-bottom: 100px;
  }
}

// ////////////
// AddRule    //
// ////////////
.tm-start-btn {
  position: fixed;
  background-color: #eeeeee;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  transition: all 0.3s;
  top: 50%;
  left: -25px;
  transform: rotate(0deg);

  &:hover {
    background-color: $primary-color;
    color: #ffffff;
    left: 0;
    transform: rotate(360deg);
  }
}

// ////////////
// TmAppList    //
// ////////////
$box-shadow-black: 4px 4px 5px mix(#000, $base-bg-color, 10%);
$box-shadow-white: -4px -4px 5px mix(#fff, $base-bg-color, 50%);
$box-shadow-black-hover: inset -4px -4px 5px mix(#000, $base-bg-color, 10%);
$box-shadow-white-hover: inset 4px 4px 5px mix(#000, $base-bg-color, 50%);

.tm-app-list {
  display: flex;
  flex-wrap: wrap;
}

.tm-app-list--item {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin-left: 10px;
  margin-top: 10px;
  box-shadow: $box-shadow-black, $box-shadow-white;
  overflow: hidden;
  position: relative;

  &:hover {
    cursor: pointer;
    box-shadow: $box-shadow-black-hover, $box-shadow-white-hover;

    .tm-app-list--title {
      transform: translate3d(0, 0, 0);
    }
  }
}

.tm-app-list--title {
  font-size: 16px;
  color: #fff;
  background-color: $primary-color;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  overflow: hidden;
  padding: 5px 16px;
  transform: translate3d(0, 100%, 0);
}

// ////////////
// TmStorage    //
// ////////////
.tm-storage {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.tm-storage--header {
  background-color: $--color-white;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.tm-storage--aside {
  background-color: $--color-white;
  min-height: 400px;
  padding: 10px;
}

.tm-storage--body {
  // background-color: $--color-black;
}

.tm-table--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tm-table--btns {
  display: flex;
}

.tm-table--search {
  display: flex;
}

// ////////////
// TmDataEditor    //
// ////////////
.tm-data-editor {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.tm-data-editor--header {}

.tm-data-editor--body {}

.tm-data-editor--footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  background-color: $base-bg-color;
  z-index: 1000;
}